<template>
  <div>
    <div class="home-header">
         <h3>饭了么</h3>
     </div>
     <h2>管理员：{{ adminUsername }}</h2>
     <span>发布公告：</span> <input type="text" v-model="gonggao">
     <button class="sure" @click="sure">确定</button>
     <button class="tuichu" @click="quit">退出</button>
     <van-tabbar route v-model="active">
  <van-tabbar-item to="/stuguan" icon="list-switching">学生</van-tabbar-item>
  <van-tabbar-item to="/shangguan" icon="list-switching">商家</van-tabbar-item>
  <van-tabbar-item to="/guanli" icon="contact-o">我的</van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import { mapState,mapActions} from "vuex";
import {getGonggao,changeGonggao} from '@/api/guanli/user'
export default {
data() {
    return {
        active:0,
        adminUsername:'',
        gonggao:"",
        gonggaoid:''
    }
},
computed: {
      ...mapState('user', ['userInfo'])
    },
    created() {
        this.adminUsername=this.userInfo.adminUsername;
        getGonggao().then((res)=>{
            const textlist=res.data.announcementList;
            console.log(textlist[0]);
            this.gonggao=textlist[0].announcementContent;
            // console.log(  this.gonggao);
            this.gonggaoid=textlist.announcementId;
        })
    },
    methods:{
    ...mapActions('user', ['logout']),
    sure(){
        console.log(this.gonggao,this.gonggaoid);
        changeGonggao(this.gonggao,this.gonggaoid).then((res)=>{
            // console.log(res);
        })
    },
    quit(){
        this.logout();
        this.$toast('退出成功');
        this.$router.push('/login')
    }
}
}
</script>

<style lang="less" scoped>

.home-header{
     width: 100%;
     height: 30px;
     background-color: rgb(10, 135, 245);
     h3{
         text-align: center;
         color: aliceblue;
         padding-top: 5px;
     }
     
  }
  h2{
    margin-top: 40px;
    text-align: center;
    width: 170px;
}
span{
    display: block;
    width: 100px;
    margin-top: 50px;
    margin-left: 15px;
    font-size: 20px;
    font-weight: 900;
}
input{
    display: block;
      width: 250px;
      margin-left: 110px;
      margin-top: -20px;
      border: none;
    border-bottom: 1px solid #b4b2b2;
    }
    .bt{
    display: block;
    border: none;
    width: 50px;
    height: 25px;
    border-radius: 20px;
    font-size: 12px;
}
    .sure{
        color: aliceblue;
        background-color: #0a87f5;
        .bt();
        margin-left: 300px;
        margin-top: 20px;
        
        
    }
    .tuichu{
    .bt();
    width: 90px;
    height: 30px;
    margin-left: 145px;
    margin-top: 440px;
    background-color: red;
    color: aliceblue;
}

</style>